<template>
    <div class="login">
        <div class="page-label">
            <div class="rect">注册</div>
            <div class="triangle"></div>
        </div>
        <div class="page-title">
            <div class="title">用户注册</div>
            <div class="vice-title">USER REGISTRATION</div>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="label">邮箱</div>
                <div class="input-wrap">
                    <a-input v-model="account" size="large" />
                </div>
            </div>
            <div class="form-item">
                <div class="label">验证码</div>
                <div class="input-wrap">
                    <a-input class="verifycode" v-model="verifyCode" style="width:220px" size="large" />
                    <a-button type="primary" class="get-btn" style="width:150px" size="large" @click="getCode()" :disabled="buttonText!=='发送邮箱验证码'">{{buttonText}}</a-button>
                </div>
            </div>
            <div class="form-item">
                <div class="label">密码</div>
                <div class="input-wrap">
                    <a-input-password v-model="password" size="large" />
                </div>
            </div>
            <div class="form-item">
                <div class="label">确认密码</div>
                <div class="input-wrap">
                    <a-input-password v-model="repassword" size="large" />
                </div>
            </div>
            <div class="form-item">
                <div class="label">真实姓名</div>
                <div class="input-wrap">
                    <a-input v-model="realName" size="large" />
                </div>
            </div>
            <div class="form-item">
                <div class="label">工作单位</div>
                <div class="input-wrap">
                    <a-input v-model="organName" size="large" />
                </div>
            </div>
            <div class="form-item btns">
                <a-button type="primary" ghost class="cancel-btn" @click="login">取消</a-button>
                <a-button type="primary" class="login-btn" @click="register">确定</a-button>
            </div>
        </div>
        
        <a-modal v-model="successVisible" wrapClassName="success-win" title="" :closable="false" centered :footer="null">
            <div class="content">
                <a-icon type="check-circle" theme="filled" />
                <div class="tips1">恭喜您，注册成功！</div>
                <div class="tips2">请用您注册使用的邮箱/密码登录，页面将于{{locationSeconds}}s后跳转登录页面</div>
                <div class="btns">
                    <a-button type="primary" @click="login">去登录</a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {getCookie, isEmail, messageTips, setCookie} from '../../until/tools';
var timer;
var seconds;
export default {
    name:'Register',
    data() {
        return {
            buttonText:'发送邮箱验证码',
            account:'',
            password:'',
            repassword:'',
            verifyCode:'',
            organName:'',
            realName:'',
            successVisible:false,
            locationSeconds:4
        }
    },
    methods:{
        getCode() {
            if(this.account==='') {
                messageTips('请输入邮箱账号',2);
                return false;
            }
            if(!isEmail(this.account)) {
                messageTips('邮箱格式不正确',2);
                return false;
            }
            let params = {
                account:this.account
            }
            this.$http.getSign(params).then(res=>{
                if(res) {
                    if(res.sign) {
                        this.$http.sendCode({sign:res.sign,...params}).then((res)=>{
                            this.setCountDown(59);
                            messageTips(res.message,3);
                        });
                    } else {
                        messageTips(res.message,1);
                    }                   
                }
            });            
        },

        setCountDown(num) {
            seconds = num;
            this.buttonText = num+'s';
            timer = setInterval(()=>{
                seconds-=1;
                this.buttonText = seconds+'s';
                if(seconds<0) {
                    clearInterval(timer);
                    this.buttonText = '发送邮箱验证码';
                }
            },1000);
        },
        register() {
            if(this.account==='') {
                messageTips('请输入邮箱账号',2);
                return false;
            }
            if(!isEmail(this.account)) {
                messageTips('邮箱格式不正确',2);
                return false;
            }
            if(this.verifyCode==='') {
                messageTips('请输入验证码',2);
                return false;
            }
            if(this.password==='') {
                messageTips('请输入密码',2);
                return false;
            }
            if(this.repassword==='') {
                messageTips('请确认密码',2);
                return false;
            }
            if(this.repassword!==this.password) {
                messageTips('两次密码不一致',2);
                return false;
            }
            if(this.realName==='') {
                messageTips('请输入真实姓名',2);
                return false;
            }
            if(this.organName==='') {
                messageTips('请输入真实姓名',2);
                return false;
            }
            let params = {
                account:this.account,
                verifyCode:this.verifyCode,
                password:this.password,
                realName:this.realName,
                organName:this.organName
            }
            this.$http.register(params).then(res=>{
                if(res) {
                    if(res.success) {
                        this.successVisible = true;
                        timer = setInterval(() => {
                            this.locationSeconds -=1;
                            if(this.locationSeconds<1) {
                                clearInterval(timer);
                                this.$router.push('/login');
                            }
                        }, 1000);
                    } else {
                        messageTips(res.message,1);
                    }
                }
            });
        },
        login() {
            this.$router.push('/login');
        }
    },
    mounted() {

        let cookieSeconds = getCookie('seconds');
        if(cookieSeconds) {
            let num = parseInt(cookieSeconds);
            this.setCountDown(num);
        }
        
        window.onbeforeunload=()=>{
            if(seconds>0) {
                setCookie('seconds',seconds,{time:seconds},true);
            }
        }
    },
    beforeDestroy() {
        if(timer) {
            clearInterval(timer);
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../scss/login.scss';
</style>